<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />

        <title>Say Hello</title>

        <link rel="icon" type="image/png" href="../favicon.png" />
        <link
            rel="stylesheet"
            href="https://pyscript.net/latest/pyscript.css"
        />
        <script defer src="../../pyscriptjs/build/pyscript.js"></script>
        <!-- <script defer src="https://pyscript.net/latest/pyscript.js"></script> -->
    </head>

    <body>
        <py-script>
            from js import handTrack, requestAnimationFrame, console
            from pyodide import create_once_callable
            import asyncio

            update_note = Element("update-note")
            canvas = Element("canvas")
            video = Element("myvideo")
            context = canvas.element.getContext("2d")

            isVideo = False
            model = None

            modelParams = {
              "flipHorizontal": True, # flip e.g for video
              "maxNumBoxes": 20, # maximum number of boxes to detect
              "iouThreshold": 0.5, # ioU threshold for non-max suppression
              "scoreThreshold": 0.6, # confidence threshold for predictions.
            }

            def toggle_video():
              global isVideo
              if (not isVideo):
                update_note.write("Starting video")
                pyscript.run_until_complete(start_video())
              else:
                update_note.write("Stopping video")
                handTrack.stopVideo(video.element)
                isVideo = False
                update_note.write("Video stopped")

            async def start_video():
              global isVideo
              update_note.write("Inside sstart video")
              status = await handTrack.startVideo(video.element)
              console.log("video started", status)
              if status:
                update_note.write("Video started. Now tracking")
                isVideo = True
                console.log( "Calling RUN DETECTION")
                y = await run_detection()
              else:
                update_note.write( "Please enable video")

            def sync_run_detection(evt):
              pyscript.run_until_complete(run_detection())

            async def run_detection():
              console.log("in RUN DETECTION: ");
              global model
              global isVideo

              console.log("...1")

              predictions = await model.detect(video.element)
              console.log("done...1")
              console.log("Predictions: ", predictions);
              model.renderPredictions(predictions, canvas.element, context, video.element);
              console.log("is Video?", isVideo)
              if (isVideo):
                console.log("requestingAnimation!")
                await requestAnimationFrame(create_once_callable(sync_run_detection));
              console.log("...2")

            def run_detection_image(img):
              console.log("in RUN DETECTION IMAGE", predictions);
              global model
              def detect(predition):
                console.log("Predictions: ", predictions);
                model.renderPredictions(predictions, canvas, context, img);
              console.log("...3")
              model.detect(img).then(detect)
              console.log("...4")

            def handle_model(lmodel):
              global model
              model = lmodel
              update_note.write("Loaded Model!")

            async def start():
              console.log("creating x")
              console.log("calling x")
              model = await handTrack.load(modelParams)#.then(handle_model)
              console.log("loaded model!")
              console.log(model)
              handle_model(model)
              print(dir(x))
              print(x)

            pyscript.run_until_complete(start())

            #});
        </py-script>

        <div class="mb10">
            <button
                id="trackbutton"
                class="bx--btn bx--btn--secondary"
                type="button"
                py-click="toggle_video()"
            >
                Toggle Video
            </button>
            <button
                id="nextimagebutton"
                class="mt10 bx--btn bx--btn--secondary"
                type="button"
                disabled
            >
                Next Image
            </button>
            <div id="update-note" class="updatenote mt10">loading model ..</div>
        </div>
        <div>
            <video autoplay="autoplay" id="myvideo" py-mount="video"></video>
            <canvas id="canvas" class="border canvasbox"></canvas>
        </div>
        <script src="lib/handtrack.min.js"></script>
    </body>
</html>
